<template>
    <div class="detail">
      <div class="head" :style="{ backgroundImage: `url(${shopinfo.info&&shopinfo.info.poi_back_pic_url})`}">
        <div class="head-top">
          <div class="back">&lt;</div>
          <img :src="shopinfo.info&&shopinfo.info.picUrl" alt="">
          <span>{{shopinfo.info&&shopinfo.info.name}}</span>
        </div>
       <div class="head-center">
        <input type="text" placeholder="搜索">
        <p>点餐</p>
        <p>评价</p>
        <p>商家</p>
       </div>
       <div class="head-bottom">
        <div>
            <span>商家配送{{shopinfo.info&&shopinfo.info.deliveryTimeTip}}</span>
            <span>距离{{shopinfo.info&&shopinfo.info.distance}}</span>
        </div>
       </div>
     </div>
     <div class="center">
        <div class="center-left">
            <div @click="shopinfoIndex=index" class="item" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
        </div>
        <div class="center-right">
            <div class="item"  v-for="(item,index) in shopinfo.taglist[shopinfoIndex].goodlist" :key="index">
              <div class="item-left">
                <img :src="item.picture" alt="">
            </div>
            <div class="item-right">
               <p>{{item.name}}</p>
               <p>{{item.promotion_info}}</p>
               <p>￥{{item.min_price}}</p>
               <button>+</button>
            </div>
            </div>
        </div>
     </div>
    </div>
  </template>
  
  <script>
  import {dp_shopinfo} from '../api/api'
  export default {
    name: 'detail',
    data(){
      return{
        shopinfo:[],
        shopinfoIndex:0
      }
      },mounted(){
        dp_shopinfo({params:{id:this.$route.params.id}}).then((res)=>{
            this.shopinfo=res.data.shopinfo
            console.log(this.shopinfo);
        })
      },
      methods:{
      
      },
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .back{
    height: 40px;
    font-size: 30px;
  }
  .center-right .item{
    display:flex ;
    width:100%;
position: relative;
  }
  .center-right{
    height: 500px;
    overflow: auto;
    width: 100%;
  }
  .item-right button{
    position: absolute;
    right: 5%;
    bottom: 0%;
    width: 25px;
    height: 25px;
    background-color:red;
    color: white;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
  }
  .item-right p:nth-of-type(3){
    font-size: 12px;
  }
  .item-right p:nth-of-type(3){
    color: red;
    position: absolute;
    bottom: 0px;
    font-size: 14px;
  }
  
  .center{
    display: flex;
  }
  .center .center-left .item {
    font-size: 12px;
    width: 100px;
   height: 50px;
   line-height: 50px;
   text-align: center;
  }
  .item-left img{
    width: 100px;
    height: 100px;
  }
 .head {
    height: 200px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 10px;
 }
 .head-center{
    display: flex;
    color: white;
 }
 .head-top{
    color: white;
 }
 .head-top img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
 }
 .head-center input{
    border: 0;
    border-radius: 20px;
    width: 80px;
    height: 30px;
    text-align: center;
 }
 .head-center p{
    margin-right: 35px;
    
    margin-top: 5px;
 }
 .head-center p:nth-of-type(1){
    margin-left: 20px;
 }
 .head-bottom{
    height: 80px;
    width:100%;
    background-color: white;
    line-height: 80px;
 }
 .head-bottom div{
    box-sizing: border-box;
    padding: 0px 10px;
 }
 .head-bottom span{
   margin-right: 10px;
   font-size: 13px;
   font-weight: bold;
 }
  </style>
  